<!-- MyCustomComponent.vue -->
<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Select } from 'ant-design-vue';

import { loadMaterialSupplierPageApi } from '#/api';

interface MaterialSupplierProps {
  // eslint-disable-next-line vue/require-default-prop
  initOptions?: { label: string; value: string }[];
}

defineOptions({
  name: 'MaterialSupplierSelect',
});

const props = withDefaults(defineProps<MaterialSupplierProps>(), {});
const modelValue = defineModel<string>();
const options = ref<any[]>([]);

onMounted(async () => {
  if (props.initOptions && props.initOptions.length > 0) {
    options.value = props.initOptions;
  } else {
    await search();
  }
});
async function search(value?: string): Promise<any> {
  const result = await loadMaterialSupplierPageApi({
    size: 100,
    searchCount: false,
    current: 1,
    orders: [{ column: 'order_no' }],
    name: value,
  });
  options.value = result.records.map((item: any) => ({
    label: item.supplierName,
    value: item.supplierId,
  }));
}
</script>
<template>
  <Select
    v-model:value="modelValue"
    :allow-clear="true"
    :filter-option="false"
    :options="options"
    :placeholder="$t('common.placeholder.select')"
    :show-search="true"
    class="min-w-60"
    @search="search"
  />
</template>
